<template>
    <!--模板对外暴露最好只暴露一个标签-->
    <div>

      <!--头部-->
      <home-header ></home-header>
      <!--轮播图-->
      <HomeSwiper :list="swiperList"></HomeSwiper>

      <Icons :iconList="iconList"></Icons>
      <!--热销推荐-->
      <HomeRecommend :recommendList="recommendList"></HomeRecommend>
      <!--周末去哪-->
      <HomeWeekend :weekendList="weekendList"></HomeWeekend>

    </div>
</template>

<script>

  //导入组件
  import HomeHeader from './components/Header'
  import HomeSwiper from './components/Swiper'
  import Icons from './components/Icons'
  import HomeRecommend from './components/Recommend'
  import HomeWeekend from './components/Weekend'
  // 发送ajax
  import axios from 'axios'

  import {mapState} from 'vuex'

  export default {
    name: 'home',
    //注册上面导入的局部组件
    components: {
      HomeHeader: HomeHeader,
      HomeSwiper: HomeSwiper,
      Icons: Icons,
      HomeRecommend: HomeRecommend,
      HomeWeekend: HomeWeekend,
    },
    data() {
        return {
          lastCity: '',
          swiperList: [],
          iconList: [],
          weekendList: [],
          recommendList: [],
        }
    },
    computed: {
      ...mapState(['city'])
    },
    methods: {
      getHomeInfo(){
        axios.get('/api/index.json?city=' + this.city).then(this.getHomeInfoSucc)
      },
      getHomeInfoSucc(res){
        res = res.data
        if (res.ret && res.data){
          const data = res.data
          this.swiperList = data.swiperList
          this.iconList = data.iconList
          this.recommendList = data.recommendList
          this.weekendList = data.weekendList
        }
      }
    },
    mounted(){
      this.lastCity = this.city
      //利用生命周期函数，发送ajax请求
      this.getHomeInfo()
    },
    activated () {
      //当页面再次显示的时候触发的生命周期函数
      if (this.lastCity !== this.city){
        this.lastCity = this.city;
        this.getHomeInfo();
      }
    }
  }


</script>

<style >

</style>

